<!--
	* @name: 自定义表单组件
	* @author: zhangpengcheng
	* @date: 2022-08-24
	-->
<template>
	<el-form validate-on-rule-change :model="ruleForm" label-position="top" ref="ruleForm"
		label-width="100px">
		<el-row :gutter="24" v-for="(item,index) in formRow" :key="index" style="margin: 0 !important;">			
			<el-col v-for="(row,indexRow) in item.elCol" :span="row.span?row.span:spanNumber"  :key="indexRow" v-if="row.show != false" style="padding: 0;margin: 0;">
				<el-form-item :prop="row.prop" style="display: flex;margin-bottom: 0;">
					<!-- <span class="label" slot="label" style="width: 25%;">{{row.label}}</span> -->
					<p class="label single" slot="label">{{row.label}}</p>
					<p :class="row.type && row.type=='textarea' ? 'wrapDisplay': 'showText'" :style="{color:row.other && row.other.color?row.other.color:'#333'}" @click="clickToView(row,ruleForm)">{{ruleForm[row.prop]}}</p>
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>

<script>
	// import uploadFile from "@/components/uploadFile";
	// import customCascader from "@/components/customCascader";
	export default {
		components: {
			// uploadFile,
			// customCascader
		},
		props: {
			// 表单显示格式
			spanNumber:{
					type: Number,
					default: 12
			},

			// 表单页面结构数据
			formRow: {
				type: Array,
				default: () => {
					return []
				}
			},
			// 表单页面结构数据
			ruleForm: {
				type: Object,
				default: function(){
					return {}
				}
				
			},
		},
		data() {
			return {
				// 表单数据
				// ruleForm: {},
			}
		},
		created() {},
		mounted() {},
		computed: {},
		methods: {
			clickToView(row,ruleForm){
				if (row.other.isClick) {
					this.$emit('clickToView', row, ruleForm);
				}
			},
		},
	}
</script>
<style>
	.el-form-item__label {
		/* width: 25%; */
		line-height: 1.2;
		
	}
	.el-form-item--medium .el-form-item__content {
		/* line-height: 36px; */
		flex:1
	}
</style>
<style scoped lang='scss'>
	.label {
		 /* @include fontBase(16px, #333333) ; */
		 color: #999;
		font-size: 14px;
		width: 100px;
	}
	>>> .el-form-item__label{
		width: 100px;
		text-align: right !important;
		margin-right: 10px !important;
	}
	.w-100 {
		width: 100%;
	}

	.saveBtn {
		/* width: 410px; */
	}
	.one{
		width: calc(100% - 15px) !important;
	}
	.elDialog{
		display: flex;
		    width: 100%;
			/* width: calc(100% - 14px);1 */
		    align-items: center;
		    justify-content: space-between;
		    border: 1px solid #DCDFE6;
		    border-radius: 4px;
		    padding: 0 15px;
			cursor: pointer;
		i{
			color:#c0c4cc
		}
	}
	::v-deep .el-form-item__label {
		padding: 0;
		text-align: right;
	}
	::v-deep .el-form-item__content {
		margin-left: 10px;
		width: calc(100% - 110px);
	}
	.showText{
		/* width: 100%; */
		/* width: calc(100% - 110px); */
		        	/*让长段文本不换行*/
					white-space: nowrap;
					/*设置文本超出元素宽度部分隐藏*/
					overflow-x: hidden;
		            /*设置文本超出部分用省略号显示*/
		            text-overflow: ellipsis;
	}
	.wrapDisplay {
		word-break: break-all
	}
</style>
